import React, { Component } from 'react'
// 类组件中的事件处理函数
// 在react 中, 默认情况下, 类组件中的事件是没有this,这一点和vue 不同,
// 所以需要开发者手动给事件处理函数绑定this

// react 中的事件处理函数中的事件对象为合成事件对象, 特点: 不存在浏览器的兼容性处理
// 可以通过合成事件对象获取原生事件对象 e.nativeEvent

// 方式1: 在类初始化的时候, 给事件处理函数绑定this
// 优点: 可以改变this,
// 缺点: 可以传参, 但是无法实现行内传参
// 在constructor(){该位置绑定this}

// 方式2: 在行内绑定this
// 优点: 可以传参, 可以改变this
// 语法: onClick = {this.事件处理函数.bind(this,参数)}

// 方式3: 在行内使用箭头函数方式
// 优点: 可以传参, 可以改变this
// 语法: onClick = {()=>{this.事件处理函数(参数)}}

// 方式4: 将事件处理函数写成箭头函数
// 缺点: 无法实现传递参数
// 优点: 简单
//  handleClickFn4 = ()=>{console.log(this)}
export default class Mycls extends Component {
    constructor() {
        super()
        //console.log('constructor');
        // console.log('this', this);
        // 使用js 中的bind 方法改变this
        this.handleClickFn1 = this.handleClickFn1.bind(this, '秦涵', 15)
    };
    handleClickFn1(name, age, e) {
        // console.log('this', this);
        // console.log('name', name);
        // console.log('age', age);
        // console.log('e', e);
        //console.log('e', e.target.innerHTML);
    }
    handleClickFn2(num, e) {
        console.log('this', this);
        console.log(num, e);
    }
    handleClickFn3(num, e) {
        console.log('this', this);
        console.log(num, e);
    }

    handleClickFn4 = (e) => {
        console.log('this', this)
        console.log('e', e);
    }
    render() {
        // console.log(this);
        return (
            <div>
                <p>类组件中的事件处理函数</p>
                <button onClick={this.handleClickFn1}>方式1</button>
                <button onClick={this.handleClickFn2.bind(this, 99)}>方式2</button>
                <button onClick={(e) => { this.handleClickFn3(100, e) }}>方式3</button>
                <button onClick={this.handleClickFn4}>方式4</button>
            </div>
        )
    }
}
